본문으로 건너뛰기

Q. `for...of` 루프와 `for...in` 루프, `forEach()` 메서드의 차이는 무엇인가요?

🧑🏻‍💻 Answer.

✅ for...of 루프

for...of 루프는 주로 반복 가능한(iterable) 객체를 순회하는 데 사용됩니다. 이는 배열, 문자열, 맵(Map), 셋(Set), 제너레이터(Generator) 등과 같은 객체에서 사용할 수 있습니다.
for...of 루프는 값 자체에 직접 접근할 수 있으며, 값을 수정하지 않습니다.

Copy code
const iterable = [1, 2, 3];
for (const value of iterable) {
  console.log(value); // 1, 2, 3
}

✅ for...in 루프

for...in 루프는 객체의 열거 가능한(enumerable) 프로퍼티를 반복하는 데 사용됩니다. 이는 객체의 프로퍼티를 순회할 때 사용됩니다.
for...in 루프는 프로퍼티의 이름 또는 키에 접근하며, 값에 직접 접근할 수는 없습니다. 주의: for...in 루프는 상속된 프로퍼티도 열거하므로 이를 필요에 따라 필터링해야 합니다.
예시:

Copy code
const obj = { a: 1, b: 2, c: 3 };
for (const key in obj) {
  console.log(key); // "a", "b", "c"
  console.log(obj[key]); // 1, 2, 3
}

✅ forEach() 메서드

forEach() 메서드는 배열의 각 요소에 대한 반복을 위해 사용됩니다. 배열 메서드로, 콜백 함수를 이용하여 각 요소에 대한 작업을 수행합니다.
forEach() 메서드는 값과 인덱스에 동시에 접근할 수 있으며, 배열을 수정하지 않는 한 가장 적합한 방법입니다.

Copy code
const arr = [1, 2, 3];
arr.forEach((value, index) => {
  console.log(`Value at index ${index}: ${value}`);
});

✅ 요약

for...of는 반복 가능한 객체 순회용, for...in은 객체 프로퍼티 순회용, forEach()는 배열 요소 반복용입니다. 각각의 선택은 사용하려는 데이터 구조 및 요구사항에 따라 달라질 것입니다.

🧑🏻‍💻 Answer.